<template>
  <div class="container">
    <div class="container__header">
      <Header :currentId="7" />
    </div>
    <div class="container__content justify-between">
      <div class="container__content__left">
        <!-- 左侧搜索条件 -->
        <SearchUser :personnelIdentification="true"  @search="onSearch" :zone-list="zoneList" :user-type-list="userTypeList"></SearchUser>
      </div>
      <el-scrollbar style="height: 996px;padding-bottom:10px;">
        <!-- 滚动条要包裹的内容 -->
        <div class="container__content__right">
          <div class="container__content__right__top">
            <div class="tips">
              <img src="@/assets/biaoti@2x.png" />
              <span>档案合集</span>
            </div>
            <el-scrollbar style="height: 376px">
              <div class="top-img">
                <div class="item" v-for="item in userArr" :key="item.id"
                  @click="changeUser(item.userId, item.path)">
                  <el-image style="margin-bottom: 30px; width: 100%; height: 100%" :src="item.path" fit="fit"
                    :lazy="true"></el-image>
                  <div class="name">{{ item.userName ? item.userName : '未识别' }}</div>
                </div>
              </div>
            </el-scrollbar>

            <div class="top-pagination">
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageNo" :page-sizes="pageSizeArr" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
              </el-pagination>
            </div>
          </div>
          <div class="container__content__right__bottom" v-if="userArr.length">
            <div class="tips">
              <img src="@/assets/biaoti@2x.png" />
              <span>档案详情</span>
            </div>

            <div class="user-detail justify-between">
              <div class="user-detail__left">
                <div class="user-detail__left__headerimg">
                  <el-image style="width: 100%; height: 100%" :src="userProfile.path"
                    :preview-src-list="[userProfile.path]" fit="scale-down" :lazy="true"></el-image>
                </div>
                <p>
                  <span class="color949BA4">用户编号：</span>
                  <span class="colorFFFFFF">{{ userProfile.id || '--' }}</span>
                </p>
                <p>
                  <span class="color949BA4">姓名：</span>
                  <span class="colorFFFFFF">{{ userProfile.userName || '--' }}</span>
                </p>
                <p style="cursor: pointer">
                  <span class="color949BA4">手机号码：</span>
                  <span class="colorFFFFFF">{{
        userProfile.userPhone ? userProfile.userPhone : "--"
      }}</span>

                  <!-- <i v-if="!isEdit" class="el-icon-edit color898995" @click="editPhone"></i>

                  <el-input placeholder="请输入电话号码" v-model="userPhone" maxlength="11" minlength="11" style="width: 60%"
                    v-if="isEdit">
                  </el-input> -->
                  <!-- <el-button type="primary" size="small" style="margin-left: 10px" v-if="isEdit"
                    @click="modifyThePhone">保存</el-button> -->
                </p>
                <p>
                  <span class="color949BA4">用户年龄：</span>
                  <span class="colorFFFFFF">{{ userProfile.age || '--' }}</span>
                </p>
                <p>
                  <span class="color949BA4">用户性别：</span>
                  <span class="colorFFFFFF">{{
        showGender(userProfile.gender)
      }}</span>
                </p>
                <p>
                  <span class="color949BA4">人员库：</span>
                  <span class="colorFFFFFF">{{ userProfile.typeName || '--' }}</span>
                </p>
                <p>
                  <span class="color949BA4">最后出现轨迹：</span>
                  <span class="colorFFFFFF">{{userProfile.lastShowPosition}}</span>
                </p>

               <div class="search-btn">
                <span class="search-btn__search" @click="searchUser()">编辑</span>
               </div>
              </div>
              <div class="user-detail__right">
                <div class="colorFFFFFF">
                  <span>轨迹</span>
                </div>
                <!-- 轨迹components -->
                <user-trace :user-id="userListId" @getRaceId="openTimeLine"></user-trace>
                <div class="chart-box">
                  <bar-echart :echartObj="echartObj" v-if="echartObj.series !== null"></bar-echart>
                  <div v-else>
                    <div class="title">{{ this.echartObj.title }}</div>
                    <not-found text="暂无数据"></not-found>
                  </div>
                </div>
                <el-dialog :modal-append-to-body="false" :title="dialogTitle" :visible.sync="dialogVisible" width="35%">
                  <div class="track">
                    <user-time-line v-if="dialogVisible" :trace_id="userProfile.id" :day="day"
                                    @onClose="closeUserModel"></user-time-line>
                  </div>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <el-dialog title="编辑" :visible.sync="isEdit" width="680px" :append-to-body="true">
      <div slot="footer" class="dialog-footer">
        <el-image style="width: 295px; height: 295px;margin-left: 48px" :src="userProfile.path" fit="fit">
        </el-image>
        <div class="dialog-substance">
          <div class="substance">
            <span class="substance-title">用户姓名</span>
            <el-input v-model="userProfile.userName" placeholder="请输入"></el-input>
          </div>
          <div class="substance">
            <span class="substance-title">手机号码</span>
            <el-input v-model="userProfile.userPhone" placeholder="请输入"></el-input>
          </div>
          <div class="substance substance2">
            <span class="substance-title">用户性别</span>
            <el-select v-model="userProfile.gender" placeholder="请选择">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="2"></el-option>
            </el-select>
          </div>
          <div class="substance">
            <span class="substance-title">用户年龄</span>
            <el-input v-model="userProfile.age" placeholder="请输入"></el-input>
          </div>
          <div class="substance substance2">
            <span class="substance-title">人员库</span>
            <el-select v-model="userProfile.userTypeId" placeholder="请选择" clearable>
              <el-option v-for="item in personnelPoolInfo" :key="item.id" :label="item.typeName"
                :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="but">
          <div class="cancel">
            <el-button @click="cancel">取消</el-button>
          </div>
          <div class="confirm">
            <el-button @click="confirm">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import SearchUser from "@/components/SearchUser.vue";
import UserTrace from "@/components/UserTrace.vue";
import UserTimeLine from "@/components/UserTimeLine.vue";

import { getServiceList, getUserListImage,getStorehouse } from "@/api/home";
import { getSnapUserDetail, getUserTypeList, modifyThePhone, personnelRegularity  } from "@/api/user";
import NotFound from "@/views/common/NotFound.vue";
import BarEchart from "@/components/BarEchart.vue";
export default {
  name: "UserPortrait",
  components: {
    Header,
    SearchUser,
    UserTrace,
    UserTimeLine,
    NotFound,
    BarEchart
  },

  data() {
    return {
      userProfile: {
        path: "",
        id: "",
        age: "",
        gender: "",
        lastShowPosition: "",
        userPhone: "",
        userTypeId: "",
      },
      personnelPoolInfo: [],
      userId: 0,
      userArr: [],
      pageNo: 1,
      zoneList: [],
      userTypeList: [],
      pageSize: 20,
      pageSizeArr: [10, 20, 30, 40, 50, 60],
      totalCount: 0,

      imageUrl: null,
      path: null,
      day: '',

      dialogVisible: false,
      dialogTitle: "轨迹时间轴",
      trace_id: null,
      userListId: '',
      userPhone: null,
      isEdit: false,
      echartObj: {}
    };
  },

  mounted() {
    // this.getUserLists();
    this.getServiceList();
    this.getUserTypeList();
    this.getStorehouse();
  },

  methods: {
    editPhone() {
      this.isEdit = !this.isEdit;
    },
    async modifyThePhone() {
      let res = await modifyThePhone({
        id: this.userListId,
        userName: this.userProfile.userName,
        age: this.userProfile.age,
        gender: this.userProfile.gender,
        phone: this.userProfile.userPhone,
        userTypeId: this.userProfile.typeName
      });
      if (res.code === 200) {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      }
      this.isEdit = !this.isEdit;
      this.getUserDetail();
    },
    changeUser(userId, path) {
      if (userId > 0) {
        this.userListId = userId;
        this.path = path;
        this.getUserDetail(userId);
        this.getPersonnelRegularity()
      }
    },
    async getUserDetail() {
      let res = await getSnapUserDetail({
        userId: this.userListId
      });
      if (res.code === 200) {
        this.userProfile = res.data;
        if (this.userProfile.age === -1) {
          this.userProfile.age = "未识别";
        }
        this.userProfile.path = this.path;
      }
    },
    async getServiceList() {
      let res = await getServiceList();
      if (res.code === 200) {
        this.zoneList = res.data;
      }
    },
    async getUserTypeList() {
      let res = await getUserTypeList();
      if (res.code === 200) {
        this.userTypeList = res.data;
      }
    },
    openTimeLine(e) {
      this.trace_id = e.trace_id;
      this.day = e.day
      this.dialogVisible = true;
    },
    closeUserModel(e) {
      console.log(e);
    },
    showGender(gender) {
      if (gender === 1) {
        return "男";
      }
      if (gender === 2) {
        return "女";
      }
      return "未知";
    },
    //人员规律柱状图
    async getPersonnelRegularity() {
      let res = await personnelRegularity({
        userId: this.userListId,
      })
      if (res.code === 200) {
        this.echartObj = {
          data: res.data && res.data.legend,
          xAxis: res.data && res.data.xdata,
          unit: "分钟",
          title: "业务规律",
          bottom: 10,
          series: res.data && res.data.series
        };
      }
    },
    //时间筛选
    onSearch(e) {
      this.startTime = e.startTime;
      this.endTime = e.endTime;
      this.imageUrl = e.imageUrl;
      this.path = e.path;
      this.pageNo = 1;
      this.zoneId = e.zoneId;
      this.userTypeId = e.userTypeId;
      this.userArr = [];
      this.userName = e.userName;
      this.searchUsers();
    },
    //筛选人员
    async searchUsers() {
      let res = await getUserListImage({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.startTime && new Date(this.startTime).getTime() / 1000,
        endTime: this.endTime && new Date(this.endTime).getTime() / 1000,
        // isDraw: 1, //是否画像
        path: this.path, //图片地址
        imageData: this.imageUrl,
        zoneId: this.zoneId,
        userName: this.userName,
        userTypeId: this.userTypeId
      });

      if (res.code == 200) {
        this.userArr = res.data.lists;
        this.totalCount = res.data.count;
        if (this.userArr.length > 0) {
          this.userListId = this.userArr[0].userId;
          this.changeUser(this.userArr[0].userId, this.userArr[0].path);
          this.getPersonnelRegularity();
        }
      } else {
        this.userArr = [];
        this.totalCount = 0;
      }
    },
    //人员初始化列表
    async getUserLists() {
      let res = await getUserListImage({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.startTime && new Date(this.startTime).getTime() / 1000,
        endTime: this.endTime && new Date(this.endTime).getTime() / 1000,
        zoneId: null, //区域id
        userName: this.userName,
        isDraw: 0 //是否画像
      });

      if (res.code == 200) {
        // this.userArr = Array.from(
        //   new Set([...this.userArr, ...res.data.lists])
        // );

        this.userArr = res.data.lists;
        if (this.userArr.length > 0) {
          this.userListId = this.userArr[0].userId;
          this.changeUser(this.userArr[0].userId, this.userArr[0].path);
          this.getPersonnelRegularity();
        }
        this.totalCount = res.data.count;
      }
    },

    handleCurrentChange(e) {
      this.pageNo = e;
      this.userArr = [];
      if (this.path && this.imageUrl) {
        this.searchUsers();
      } else {
        this.getUserLists();
      }
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.pageNo = 1;
      this.userArr = [];
      if (this.path && this.imageUrl) {
        this.searchUsers();
      } else {
        this.getUserLists();
      }
    },
    searchUser(){
      this.isEdit = true;
    },
    cancel() {
      this.isEdit = false;
    },
    async confirm() {
      let res = await modifyThePhone({
        userId: this.userListId,
        userName: this.userProfile.userName,
        age: this.userProfile.age,
        gender: this.userProfile.gender,
        phone: this.userProfile.userPhone,
        userTypeId: this.userProfile.userTypeId
      });
      if (res.code === 200) {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      }
      this.isEdit = false;
      this.getUserDetail();
    },
      //人员库
      async getStorehouse() {
      let res = await getStorehouse();
      if (res.code == 200) {
        this.personnelPoolInfo = res.data;
      }
    },
  }
};
</script>

<style lang="scss" scoped>
// .el-scrollbar__wrap {
//   overflow-x: hidden;
// }
.container {
  &__content {
    margin-top: 16px;
    width: calc(100% - 20px);
    height: auto;
    margin-left: 20px;

    &__left {
      width: 364px;
      height: 982px;
      background-color: #303136;
      border-radius: 8px;
      padding: 24px;
      box-sizing: border-box;
    }

    &__right {
      width: 1488px;
      margin-right: 20px;
      border-radius: 8px;
      overflow: hidden;

      .tips {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 24px;
        box-sizing: border-box;
        color: #fff;

        img {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }
      }

      &__top {
        width: 100%;
        // max-height: 557px;
        background-color: #303136;
        border-radius: 8px;
        padding-bottom: 24px;

        .top-img {
          width: calc(100% - 48px);
          margin: 0 auto;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .item {
            flex: 0 0 13%;
            height: 176px;
            text-align: center;
            line-height: 176px;
            /* 边距，css函数代替 */
            margin-right: calc(9% / 6);
            margin-bottom: calc(9% / 6);
            display: flex;
            flex-direction: column;

            .name {
              width: 100%;
              height: 26px;
              background-color: rgba(0, 0, 0, 0.5);
              font-size: 16px;
              color: rgba(255, 255, 255, 1);
              text-align: center;
              line-height: 26px;
              position: relative;
              bottom: 55px;
            }
          }

          /* 去除每行尾的多余边距 */
          .item:nth-child(7n) {
            margin-right: 0;
          }

          /* 使最后一个元素的边距填满剩余空间 */
          .item:last-child {
            margin-right: auto;
          }
        }

        .top-pagination {
          display: flex;
          justify-content: flex-end;
          padding-right: 24px;
          padding-top: 24px;
        }
      }

      &__bottom {
        width: 100%;
        height: 1044px;
        background-color: #303136;
        margin-top: 16px;
        border-radius: 4px;
        overflow: hidden;

        .user-detail {
          width: 100%;
          height: 100%;

          p {
            text-align: left;
          }

          .color949BA4 {
            color: #949ba4;
          }

          .colorFFFFFF {
            color: #fff;
          }

          .color898995 {
            color: #898995;
            margin-left: 10px;
          }

          &__left {
            width: 424px;
            background-color: #363940;
            padding-left: 36px;
            box-sizing: border-box;
            font-size: 14px;

            &__headerimg {
              width: 176px;
              height: 176px;
              margin: 24px 0 24px 0;
            }
          }

          &__right {
            width: calc(100% - 424px);
            text-align: left;
            padding: 0 24px;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}

.chart-box {
  height: 354px;
  width: 100%;
  margin-top: 50px;

  .title {
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
  }
}

.search-btn {
  width: 100%;
  margin-top: 50px;
  cursor: pointer;
  span {
    width: 146px;
    height: 36px;
    display: inline-block;
    text-align: center;
    line-height: 36px;
    border-radius: 4px;
  }

  &__reserve {
    border: 1px solid #5cfbff;
    color: #5cfbff;
  }

  &__search {
    background-color: #5cfbff;
    color: #17181a;
  }
}
.dialog-footer {
  display: flex;
  align-items: center;

  .dialog-substance {
    margin-left: 40px;
    display: flex;
    font-size: 14px;
    flex-direction: column;
    gap: 20px;
    width: 115px;

    .substance {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .substance-title {
        width: 70px;
        color: #949BA4;
        text-align: start;
      }

      .substance-value {
        color: #fff;
      }


   ::v-deep .el-input__suffix {
      right: -65px;
  }
    }
  }
}

::v-deep .el-dialog {
  width: 680px;
  height: 539px;
  border-radius: 16px;

  .el-dialog__title {
    font-size: 24px;
    margin-left: 20px;
  }

  .el-icon-close:before {
    font-size: 34px;
  }

  .el-input__inner {
    width: 184px;
  }

}

.but {
  position: absolute;
  justify-content: center;
  bottom: 40px;
  display: flex;
  width: 100%;
  gap: 20px;

  ::v-deep .el-button {
    width: 146px;
    height: 36px;
    border: 1px solid rgba(92, 251, 255, 1);
  }

  .cancel {
    ::v-deep .el-button {
      color: rgba(92, 251, 255, 1);
      background-color: rgba(48, 49, 54, 0);
    }
  }

  .confirm {
    ::v-deep .el-button {
      color: rgba(23, 24, 26, 1);
      background-color: rgba(92, 251, 255, 1);
    }
  }
}

::v-deep .el-dialog__body{
  padding: 0;
}

.track{
  overflow: auto;
  height: 500px;
  width: 100%;
}
</style>
